<template>
    <div  v-show="$store.state.showMenu" class="menu-cover" :style="{height:m_height+'px'}" @click="hideMenu">
        <transition name="slide-fade" :duration="1000">
            <div class="main-menu" @click.stop v-show="!$store.state.switchMenu">
                <BackgroundBox></BackgroundBox>
                <div class="menu-container">
                    <div class="title">更换背景图</div>
                    <div class="change-bg">
                        <div class="bg-box" v-for="(item, idx) in my_src" :key="idx" @click="chooseBg(idx)">
                            <img :src="item.src" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>


<script>

import BackgroundBox from '@/components/BackgroundBox';
import { clearTimeout } from 'timers';

export default {
    data() {
        return {
            // m_height: 500
        }
    },
    computed: {
        m_height  () {
            return this.$store.state.hView;
        },
        my_src () {
            return this.$store.state.linkImg;
        }
    },
    props: {
        isShow: Boolean
    },
    methods: {
        hideMenu(){
            // this.$store.commit("toggleMenu");
            this.$store.commit("onSwitchMenu")
            let t = setTimeout(() => {
                this.$store.commit("hideMenu");
            }, 800);
        },
        chooseBg(ele){
            console.log(ele);
            this.$store.commit("chooseBackground", ele);
        }
    },
    components: {
        BackgroundBox
    }
}
</script>

<style lang="scss" scoped>
    .menu-cover{
        position: fixed;
        width: 100%;
        // height: 200px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        top: 0;
        left: 0;
        z-index: 2;

        .main-menu{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 80%;
            height: 100%;
            overflow: hidden;
            background-color: transparent;
            background-color: rgba($color: #ffffff, $alpha: 0.3);
        }
    }
    .menu-container{
        position: relative;
        width: 100%;
        min-height: 200px;
        padding: 15px;
        .title{
            border-top: 1px solid rgba($color: #ffffff, $alpha: 0.15);
            border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.15);
            padding: 5px;
            font-size: 14px;
            text-align: left;
            color: #eeeeee;
        }
        .change-bg{
            .bg-box{
                display: inline-block;
                vertical-align: top;
                padding: 5px;
                width: 33.33%;
                min-height: 20px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
        }
    }

.slide-fade-enter-active {
  transition: all .5s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
  transform: translateX(-80%);
  opacity: 0;
}
</style>
